<template>
  <div class="fund-account" :id="idName">
    <account-toggle :title="'基金账户'" :parentId="idName" color1="RGBA(15,61,144,0.3)" color2="#3F78E1" @toggleFunc="toggleFunc">
    </account-toggle>
    <div class="fund-account-over">
      <div class="one">
        <div class="row">基金市值(仅开放式基金)</div>
        <div class="row fund-assest"><span>¥</span>{{fundAssest}}</div>
      </div>
      <div class="two">
        <div class="row">基金盈亏</div>
        <div class="fund-income-balance" :class="incomeBalance<0?'color-green':'color-red'">{{incomeBalance}}</div>
      </div>
    </div>
    <transition name="slide-fade">
      <div class="fund-account-content" v-show="isShow">
        <div class="headline"><span></span>开放式基金持仓</div>
        <position-list :page="'account'"></position-list>
      </div>
    </transition>
    <div class="bottom-blank" :class="{'account-close':!isShow}"></div>
  </div>
</template>

<script>
  import AccountToggle from 'components/selfaccount/AccountToggle'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import PositionList from 'components/fund/PositionList'

  export default {
    data () {
      return {
        fundAssest: '--',
        incomeBalance: '--',
        isShow: false,
        idName:'fundAccount'
      }
    },
    props: {
      userCode: {
        type: String
      }
    },
    components: {
      PositionList,
      AccountToggle
    },
    created: function () {
      this.fetchData();
    },
    methods: {
      fetchData(){
        //获取开放式基金总资产
        RemoteDAO.callJCL11170(this.userCode, response => {
          if (response.error == 0) {
            let data = response.data.body
            this.fundAssest = CommonUtil.toFixed(data.fund_assest, 2)
            this.incomeBalance = CommonUtil.toFixed(data.income_balance, 2)
            if (this.incomeBalance >= 0) {
              this.incomeBalance = '+' + this.incomeBalance
            }
          } else {
            this.$store.dispatch('setTip', {time: 2200, text: '开放式基金总资产查询失败：' + response.data});
          }
        })
      },
      toggleFunc(isShow){
        this.isShow = isShow
      }
    }
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
  .fund-account {
    position: relative;
    background: #FFFFFF;
  }
  .fund-account-content {
    z-index: 995;
    position: relative;
  }
  .fund-account-over {
    z-index: 997;
    position: relative;
    width: 100%;
    background: #3F78E1;
    color: #FFFFFF;
    display: inline-block;
    height: 125px;
    margin-bottom: -5px;
  }

  .fund-account-over > div {
    display: inline-block;
    float: left;
  }

  .fund-account-over .one {
    width: 74%;
    padding: 24px 0 0 7.2%;
  }

  .fund-account-over .two {
    width: 26%;
    padding-top: 34px;
    text-align: center;
  }

  .fund-account-over .one .row:nth-child(1) {
    margin-bottom: 10px;
  }

  .fund-account-over .two .row:nth-child(1) {
    font-size: 12px;
  }

  .fund-account-over .fund-assest {
    font-size: 30px;
    color: #FFFF9E;
  }

  .fund-account-over .fund-assest span {
    font-size: 20px;
    margin-right: 9px;
  }

  .fund-account-over .fund-income-balance {
    font-size: 14px;
    background: #22488E;
    border-radius: 13px;
    display: inline-block;
    padding: 0 10px;
    min-width: 65px;
    margin-top: 6px;
  }

  .bottom-blank {
    width: 100%;
    height: 40px;
    background: #3F78E1;
    z-index: 998;
    position: relative;
  }
  .account-close{
    margin-bottom: 4px;
  }
</style>
